<template>
  <div style="background-color: #000;">
    <section>
      <div class="container">
        <!-- 面包屑导航star -->
        <el-breadcrumb separator="/" class="breadCrumb_Box">
          <el-breadcrumb-item :to="{ path: '/packageAPP' }">打包APP</el-breadcrumb-item>
          <!-- <el-breadcrumb-item>新建应用</el-breadcrumb-item> -->
          <el-breadcrumb-item><strong>{{c_breadCrumb_name}}</strong></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑导航end -->
        <el-row class="content">
          <el-col class="nav" :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
            <packAppMenu @handleClick="handleClick"></packAppMenu>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20" style="min-height: 70vh;">
            <div v-if="active==0">
              <createApp></createApp>
            </div>
            <div v-if="active==1">
              <createMsg></createMsg>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script>
  import packAppMenu from "@/components/packApp/packAppMenu";
  import createApp from "@/components/packApp/createApp";
  import createMsg from "@/components/packApp/createMsg";
  export default {
    components: {
      createApp,
      createMsg,
      packAppMenu
    },
    data() {
      return {
        userSrc: '../../../static/realName/userico.png', //我的资料图标
        orderSrc: '../../../static/realName/orderico.png', //我的订单图标
        // 默认显示first页面
        c_breadCrumb_name: "新建应用",
        // 记录当前tab页
        active: 0,
      };
    },
    created() {
      // 判断面包屑导航的显示内容
      if (sessionStorage.getItem('acount_detailInfo') != null) {
        this.active = sessionStorage.getItem('acount_detailInfo')
        console.log(this.active);
        if (this.active == 0) {
          this.c_breadCrumb_name = "新建应用";
        }
        if (this.active == 1) {
          this.c_breadCrumb_name = "新建记录";
        }

      }
      console.log(this.$route.name);
      var token_time = sessionStorage["token_time"];
      token_time = parseInt(token_time);
      token_time = token_time + 3600000;
      var now = new Date().getTime();
      if (token_time < now || token_time == undefined || isNaN(token_time)) {
        console.log("未登录");
        //跳转到登录;
        sessionStorage.setItem("currentTab_title", "");
        this.$router.push({
          path: "/login",
          name: "login",
        });
        return;
      }

    },
    mounted() {

    },
    beforeRouteLeave(to, from, next) {
      // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
      // 根据个人需求决定清除的时间
      sessionStorage.removeItem("acount_detailInfo");
      next();
    },
    methods: {
      // 选择侧边导航栏
      handleClick(index) {
        this.active = index
        if (this.active == 0) {
          this.c_breadCrumb_name = "新建应用";
        }
        if (this.active == 1) {
          this.c_breadCrumb_name = "新建记录";
        }
      },
      goUrl(path, name) {
        if (name == "signatureSuper") {
          location.reload();
        }
        this.$router.push({
          path: path,
          name: name,
        });
      },
    },
  };

</script>
<style scoped>
  .breadCrumb_Box {
    margin-top: 30px;
  }

  .container {
    background-color: #000;
  }

  .content {
    margin: 20px 0px 30px 0px;
    background: rgba(30, 30, 30, 0.8);
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
  }

  div>>>.nav {
    display: inline-block;
    /* background-color: #fff; */
  }

  .breadCrumb_Box>>>.el-breadcrumb__item span.el-breadcrumb__inner.is-link {
    color: #ee7829;
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .el-breadcrumb__separator {
    color: #fff;
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .el-breadcrumb__inner {
    color: #fff;
  }

</style>
